<template>
  <div class="conainer">
    <div class="header">
      <div class="center">
        <img :src="logo" width="245px" class="logo" />
      </div>
      <div class="center">
        <el-button type="text" @click="login">登录</el-button>
      </div>
    </div>
    <!-- <div class="menu center">
      <div
        :class="active == 1 ? 'active center' : ' center'"
        style="width: 150px"
      >
        <el-button type="text" @click="menuClick(1)">网站首页</el-button>
      </div>
      <div
        :class="active == 2 ? 'active center' : ' center'"
        style="width: 150px"
      >
        <el-button type="text" @click="menuClick(2)">新闻资讯</el-button>
      </div>
    </div> -->

    <div class="b1">
      <div class="intro" style="width: 36%; margin-left: 10%">
        <div
          class="title_1"
          style="font-size: 36px; margin-top: 20px; width: 100%; color: white"
        >
          南京5G+工业互联网融合创新中心
        </div>
        <div
          class="discript"
          style="font-size: 22px; width: 100%; margin-top: 20px"
        >
          致力于“5G+工业互联网”关键技术研发、优势资源共享
        </div>
      </div>
    </div>
    <div class="center" style="flex-direction: column; justify-content: center">
      <div class="subtitle">
        <span class="subtitle-color-grey"></span>
        <span class="subtitle-color-blue"></span>
      </div>
      <div class="new-title">新闻资讯</div>
      <i class="el-icon-caret-bottom"></i>
      <vue-seamless-scroll
        :data="tableData"
        :class-option="classOption"
        class="seamless-warp"
      >
        <el-table
          :show-header="false"
          :data="tableData"
          ref="table"
          style="width: 100%;font-size: 20px;"
        >
          <el-table-column style="width: 80%" show-overflow-tooltip>
            <template slot-scope="scope">
              <a :href="scope.row.url" target="_blank" class="buttonText"
                >>{{ scope.row.title }}</a
              >
            </template>
          </el-table-column>
          <el-table-column prop="date" style="width: 20%" align="right">
          </el-table-column>
        </el-table>
      </vue-seamless-scroll>
      <div class="new-title">主要产品</div>
      <i class="el-icon-caret-bottom"></i>

      <div class="carousel">
        <!-- :interval="4000"  -->
        <el-carousel type="card" :interval="4000" height="320px">
          <el-carousel-item v-for="item in Solutions" :key="item.title">
            <div
              :class="item.class"
              style="background-size: 100% 100%; height: 300px; color: #fff"
            >
              <div class="intro">
                <div class="title_1" style="color: white; margin: 0px">
                  {{ item.title }}
                </div>
                <div class="discript">
                  {{ item.describe }}
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- <div class="subtitle">
        <span class="subtitle-color-grey">MYTURITY MODEL</span>
        <span class="subtitle-color-blue">OF INTELLIGENT MANUFACTURING</span>
      </div>

      <div class="new-title">智能制造能力成熟度模型</div>
      <p class="model-text">
        PTRM模型，反映了人员将资源、技术应用到制造环节，提升智能制造能力成熟度等级的过程
      </p>
    </div> -->

      <div class="new-title">企业智改服务平台诊断流程</div>
      <i class="el-icon-caret-bottom"></i>
      <p
        class="model-text"
        style="
          margin: 40px auto 20px auto;
          width: 80%;
          font-size: 24px;
          line-height: 50px;
          text-indent:2em;
        "
      >
        南京5G+工业物联网融合创新中心着手开发企业智能改造服务平台，为大中小企业提供数字化转型诊断服务和解决方案，对于推进南京各区产业赋能升级，助力企业加快建设工业互联网，提升企业进行科技变革和业务创新的能力，推动社会经济的快速增长具有重要的推广价值和社会效益。
      </p>
      <img src="@/assets/images/flow.png" width="600px" />

      <div class="center" style="margin-top: 20px; flex-direction: column">
        <div class="new-title">联系我们</div>
        <i class="el-icon-caret-bottom"></i>
      </div>

      <div
        style="
          margin-right: auto;
          margin-left: auto;
          text-align: left;
          line-height: 36px;
          max-width: 60%;
        "
      >
        <div>联系人：徐良</div>
        <div>联系电话：18168092589</div>
        <div>微 信：</div>
        <img
          :src="wechat"
          style="
            margin-left: 10em;
            margin-bottom: 20px;
            height: 250px;
            width: 250px;
          "
        />
      </div>
      <!--      <img-->
      <!--        :src="logo"-->
      <!--        style="height: 100px; width: 320px; float: right"-->
      <!--      />-->
      <div class="footer">
        <div class="bg">
          <div class="details">
            <p style="margin: 0">
              Copyright 2022 南京5G+工业互联网融合创新中心 All Right Reserved
              <a href=" " target="_blank" style="color: #fff">
                苏ICP备2022023373号
              </a>
              <br />
              地址:南京市江宁区弘景大道99号科技1号楼1819
              {{ "\xa0\xa0" }}邮编:211169 <br />
              Powered by 心之翼（南京）智能科技有限公司
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import logo from "@/assets/logo/logo-large.png";
import banner1 from "@/assets/banners/banner-3.jpg";
import banner2 from "@/assets/banners/banner-4.jpg";
import vueSeamlessScroll from "vue-seamless-scroll";
import wechat from "@/assets/about/wechat.png";

export default {
  name: "Org",
  components: { vueSeamlessScroll },
  data() {
    return {
      logo: logo,
      wechat: wechat,
      active: 1,
      Solutions: [
        {
          title: "智能诊断",
          class: "b4",
          describe: "——助力企业智改数转升级",
        },
        {
          title: "实训基地",
          class: "b3",
          describe: "——培养智改数转专技人才",
        },
        {
          title: "一站式服务",
          class: "b2",
          describe: "——精准对接优秀服务商",
        },
      ],
      tableData: [
        {
          title: "南京召开全市制造业“智改数转”工作现场推进会 ",
          url: "https://www.sohu.com/a/559229673_121106832",
          date: "2022-06-18",
        },
        {
          title: "数字技术赋能！3年推动超5万家江苏规上工业企业“智改数转”全覆盖",
          url: "http://news.10jqka.com.cn/20220613/c639729511.shtml",
          date: "2022-06-13",
        },
        {
          title: "市委书记专题调研！跑出“智改数转”加速度，南京这样部署",
          url: "https://baijiahao.baidu.com/s?id=1735233524435744928&wfr=spider&for=pc",
          date: "2022-06-10",
        },
        {
          title: "“南京市制造业加快推进“智改数转”",
          url: "https://baijiahao.baidu.com/s?id=1733683674907800014&wfr=spider&for=pc",
          date: "2022-05-24",
        },
        {
          title: "江宁开发区：“智改数转”激发产业变革",
          url: "https://baijiahao.baidu.com/s?id=1732879530864840164&wfr=spider&for=pc",
          date: "2022-05-15",
        },
      ],
      classOption: {
        step: 0.3,
      },
    };
  },
  mounted() {},
  methods: {
    menuClick(active) {
      this.active = active;
    },
    login() {
      // this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.replace("/login");
    },
  },
};
</script>
<style lang="scss" scoped>
.bg {
  // background-color: ;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.active {
  background-color: #ededf5;
  height: 59px;
}

.el-carousel__container {
  height: 270px !important;
}

.word-center {
  text-align: center;
}
</style>
<style lang="scss" scoped>
.conainer {
  min-width: 1560px;
  overflow: auto;
  height: 100%;

  .header {
    height: 76px;
    display: flex;
    justify-content: space-around;
  }

  .menu {
    background-color: #e5e5f1;
    height: 60px;
  }

  .subtitle {
    margin-top: 50px;
    display: flex;

    .subtitle-color-grey {
      color: #aaa;
      font-size: 30px;
      line-height: 50px;
    }

    .subtitle-color-blue {
      color: #197bba;
      font-size: 30px;
      line-height: 50px;
    }
  }

  .new-title {
    margin-top: 40px;
    font-weight: 600;
    font-size: 28px;
  }

  .model-text {
    color: #666;
    margin: 35px 0 20px 0;
  }

  .carousel {
    width: 80%;
    height: 320px;

  }

  .intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    margin-left: 70%;
    font-family: "黑体";

    .title_1 {
      font-size: 24px;
    }
    .discript {
      font-size: 16px;
    }
  }

  .obj-position {
    // display: flex;
    position: relative;
    // top: 500px;
    .maturity-wrap {
      height: 70%;
      min-height: 270px;
      width: 1200px;
      margin: auto;
      position: absolute;
      left: 0;
      right: 0;
      top: 282px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;

      .fourObjBox-item {
        position: relative;
        width: 200px;
        height: 200px;

        .obj-OutsideCircular:after {
          content: "";
          display: block;
          width: 4px;
          height: 140px;
          background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#197bba),
            to(transparent)
          );
          background: linear-gradient(180deg, #197bba, transparent);
          position: absolute;
          left: 38px;
          top: 80px;
        }

        .obj-OutsideCircular {
          width: 80px;
          height: 80px;
          background-color: rgba(50, 150, 228, 0.5);
          border-radius: 50%;
          position: absolute;
          top: 0;
          left: 0;

          .obj-circular {
            width: 67px;
            height: 67px;
            background-color: #197bba;
            border-radius: 50%;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;

            .obj-circular-text:first-of-type {
              margin-bottom: 0;
            }

            .obj-circular-text:nth-of-type(2) {
              margin-top: 0;
            }

            .obj-circular-text {
              font-size: 15px;
              color: #fff;
            }
          }
        }

        .obj-circular-container {
          width: 200px;
          position: absolute;
          left: 89px;

          .obj-circular-title {
            font-size: 19px;
            font-weight: 700;
            height: 35px;
            line-height: 35px;
            text-align: center;
            color: #fff;
            background-color: #197bba;
          }

          .obj-circular-content-wrap {
            color: #fff;
            padding: 8px;
            border: 1px solid #fff;
            border-top-color: transparent;
            background: rgba(0, 0, 0, 0.3);
            width: 100%;
            height: 100%;
            text-align: justify;

            .obj-item-name {
              font-size: 16px;
              line-height: 29px;
            }

            .obj-item-content {
              color: #eff0f3;
              font-size: 13px;
              line-height: 20px;
              letter-spacing: 3px;
            }
          }
        }
      }
    }
  }

  .footer {
    width: 100%;
    height: 120px;
    background: #49a8ba;

    .bg {
      margin: 0 auto;
      width: 1200px;
      height: 120px;
      //background: url("https://www.jit.edu.cn/images/botLOGO.png") no-repeat
      //  15px center;
      .details {
        //float: left;
        display: block;
        width: 760px;
        line-height: 26px;
        text-align: center;
        font-size: 12px;
        color: #fff;
        margin: 20px auto;
      }

      details > p {
        margin: 0;
      }
    }
  }
}
.b1 {
  background: url("../../assets/banners/banner-1.jpg") no-repeat;
  background-size: 100% 100%;
  height: 600px;
  color: white;
}

.b2 {
  background: url("../../assets/banners/banner-2.jpg") no-repeat;
  background-size: 100% 100%;
  height: 600px;
  color: #fff;
  .intro {
    margin-left: 20%;
  }
}

.b3 {
  background: url("../../assets/banners/banner-3.jpg") no-repeat;
  background-size: 100% 100%;
  height: 600px;
  color: #fff;
}
.b4 {
  background: url("../../assets/banners/banner-4.jpg") no-repeat;
  background-size: 100% 100%;
  height: 600px;
  color: #fff;
}
.seamless-warp {
  margin: 60px auto;
  width: 60%;
  max-height: 300px;
  overflow: hidden;
}
</style>
